<template>
<div>
  <!-- 面包屑 -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品分类</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片区域 -->
  <el-card class="box-card">
    <el-alert
      title="注意：只允许为第三级分类设置相关参数"
      type="warning"
      :closable="false"
      show-icon>
    </el-alert>
    <!-- 三级分类 -->
    <div class="block">
     选择商品分类： <el-cascader
        v-model="cat_id"
        :options="allType"
        :props="selectProps"
        @change="selectChange"
        clearable></el-cascader>
    </div>

    <!-- 标签页 -->
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="动态参数" name="many">
        <div>
          <el-button class="addMany" type="primary" @click="addDialogVisible = true">添加参数</el-button>
        </div>
        <el-table
          :data="manyList"
          style="width: 100%"
          stripe
          border>
          <el-table-column type="expand">
            <template #default="scope">
              <el-tag :key="index" v-for="(item,index) in scope.row.attr_vals" closable @close="delActive(scope.row)">
                {{ item }}</el-tag>
              <!-- 添加属性 -->
              <el-input v-if="scope.row.inputVisible" class="input-new-tag" size="small" v-model="scope.row.inputValue"></el-input>
              <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
            </template>
          </el-table-column>
          <el-table-column
            type="index"
            label="#">
          </el-table-column>
          <el-table-column
            prop="attr_name"
            label="参数名称">
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="mySlot_1">
              <el-button @click="editDialog(mySlot_1.row)" type="primary" icon="el-icon-search">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="静态参数" name="only">
        <div>
          <el-button class="addMany" type="primary" @click="addDialogVisible = true">添加属性</el-button>
        </div>
        <el-table
          :data="onlyList"
          style="width: 100%"
          stripe
          border>
          <el-table-column
            type="index"
            label="#">
          </el-table-column>
          <el-table-column
            prop="attr_name"
            label="参数名称">
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="mySlot_1">
              <el-button @click="editDialog(mySlot_1.row)" type="primary" icon="el-icon-search">编辑</el-button>
              <el-button type="danger" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>

  <!--添加用户的弹出框-->
  <el-dialog title="添加" v-model="addDialogVisible" width="50%">
    <!--ref 类似于dom操作获取节点，这里获取此表单-->
    <el-form :model="addForm" status-icon :rules="rules" ref="addForm" class="demo-ruleForm" label-width="70px">
      <el-form-item label="添加名称" prop="attr_name">
        <el-input v-model="addForm.attr_name" ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
          <span class="dialog-footer">
            <el-button @click="resetForm('addForm')">取 消</el-button>
            <el-button type="primary" @click="addName('addForm')">确 定</el-button>
          </span>
    </template>
  </el-dialog>
</div>
</template>

<script>
import { ElMessage } from 'element-plus'

export default {
name: "params",
  data(){
  return {
    activeName:'many',
    cat_id:[],
    allType:[],
    addForm:{

    },
    selectProps:{
      label:'cat_name',
      value:'cat_id',
      expandTrigger:'hover'
    },
    rules:{
      cat_name: [
        { required: true, message:'请输入商品名称', trigger: 'blur' }
      ]
    },
    addDialogVisible:false,
    manyList:[],
    onlyList:[]
  }
  },
  created() {
    this.getAllType();
  },
  methods:{
    getAllType() {
      this.axios.get('categories', {
        params: {
          type:3
        }
      }).then(resp => {
        if (resp.data.meta.status !== 200) return ElMessage.error(resp.data.meta.msg);
        this.allType = resp.data.data;
      }).catch(err => {
        console.log(err);
      })
    },
    //分类级别改变事件
    selectChange(){
      this.tabClick();
    },
    //标签页的点击事件
    tabClick(){
      //在发送请求获取数据之前，要先判断一下，有没有进行三级联动
      if( !this.cat_id || this.cat_id.length < 3 ){
        ElMessage.warning('请选择三级分类');
        this.cat_id = [];
        return ;
      }
      //有三级联动，开始发送请求
      this.axios.get(`categories/${this.cat_id[this.cat_id.length - 1]}/attributes`,{
        params:{
          sel:this.activeName
        }
      }).then(resp=>{
        console.log(resp);
        //注意：这里的数据 attr_vals是一个字符串 ，而我们需要v-for循环，要数组
        resp.data.data.forEach(item=>{
          // item.attr_vals = item.attr_vals ? item.attr_vals.split(' ') : [];
          item.attr_vals = item.attr_vals.length === 0 ? [] : item.attr_vals.split(',');
          //设置一个变量，用来控制input和按钮的显示
          item.inputVisible= false;
          item.inputValue='';
        });
        if( this.activeName === 'only' ){
          this.onlyList = resp.data.data;
        }else {
          this.manyList = resp.data.data;
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    //删除动态数参数里面的标签
    delActive(row){
      console.log(row);
      this.row.attr_vals.splice(this.row.attr_vals.indexOf(row), 1);
    },
    showInput(row){
      row.inputVisible = true;
    },
    editDialog(row){
      console.log(row);
    },
    //点击添加数据
    addName(formName){
      this.axios.post(`categories/${this.cat_id[this.cat_id.length - 1]}/attributes`).then(resp=>{
        if (resp.data.meta.status !== 201) return ElMessage.error(resp.data.meta.msg);
        ElMessage.success('创建成功');
      }).catch(err=>{
        console.log(err);
      })
    },
    //重置数据
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.addDialogVisible = false;
    }
  }
}
</script>

<style scoped>
.el-alert, .block, .addMany{
  margin-bottom: 20px;
}
.el-tag{
  margin: 10px;
}
.input-new-tag{
  width: 100px;
  margin-left: 10px;
}
.el-breadcrumb{
  font-size: 20px;
}
.box-card{
  margin-top: 20px;
}
.el-pagination{
  margin-top: 10px;
}
</style>
